<!-- 电子对账单 -->
<template>
    <div class="page has-navbar electronBill">
        <div class="page-content">
            <div class="time-filter">
                <datepicker-c :value="startTime" label="请选择起始时间" @input="setStartTime"  date-format="yyyy-mm-dd"></datepicker-c>
                <datepicker-c :value="endTime" label="请选择截止时间"  @input="setEndTime" date-format="yyyy-mm-dd"></datepicker-c>
                <span class="time-filter-sty">当前时间范围：{{startTime}}~{{endTime}}</span>
                <!-- <span class="time-filter-sty" @click="showDate">请选择起始时间：{{startTime}}</span>
                <span class="time-filter-sty" @click="$refs.pickerForEnd.open();">请选择截止时间：{{endTime}}</span>
                <mt-datetime-picker
                ref="pickerForStart"
                type="date"
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                v-model="sTime"
                @confirm="setStartTime"
                >
                </mt-datetime-picker>
                <mt-datetime-picker
                ref="pickerForEnd"
                type="date"
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                v-model="eTime"
                @confirm="getDataByNowTimeRange"
                >
                </mt-datetime-picker> -->
            </div>
            <div class="bill-amount">
                <span>总计：</span>
                <div class="bill-amount-item">
                    <span>收款金额</br><b>￥{{totalAmount/100}}</b></span>
                </div>
                <!-- <div class="bill-amount-item">
                    <span>退款金额</br><b>￥{{refundAmount/100}}</b></span>
                </div> -->
                <div class="bill-amount-item">
                    <span>手续费</br><b>￥{{serviceChargeAmount/100}}</b></span>
                </div>
                <div class="bill-amount-item">
                    <span>划账金额</br><b>￥{{(totalAmount - serviceChargeAmount)/100}}</b></span>
                </div>
                <!-- <div class="bill-amount-item">
                    <span>订单数</br><b>￥{{totalSingular}}</b></span>
                </div> -->
            </div>
            <div class="listTitle clearfix">
                <div style="width:25%" class="left">收款金额</div>
                <div style="width:20%" class="left">手续费</div>
                <div style="width:25%" class="left">划账金额</div>
                <div style="width:30%" class="left">日期</div>
            </div>
            <scroll class="billList"
                    :on-infinite="onInfinite">
                <item v-for="(item, index) in billList" :key="index" @click.native="onItemClick(index)" class="billItem" :class="{'item-stable': index % 2 == 0}">
                    <div style="width:25%" class="left" v-text="'￥'+item.totalAmountIncome/100"></div>
                    <div style="width:20%" class="left" v-text="'￥'+item.serviceChargeAmount/100"></div>
                    <div style="width:25%" class="left" v-text="'￥'+(item.totalAmountIncome-item.serviceChargeAmount)/100"></div>
                    <div style="width:30%" class="left" v-text="new Date(item.date).Format('yyyy-MM-dd')"></div>
                </item>

                <div v-if="!haveMore" slot="infinite" class="text-center">没有更多数据</div>
            </scroll>
        </div>
    </div>
</template>

<script type="text/javascript">
export default{
    props: ['storeId'],
	data () {
		return {
            refundAmount:0,//退单金额
            serviceChargeAmount:0,//手续费金额
            totalAmount:0,//总金额
            totalSingular:0,//总订单量
            sTime:'',
            eTime:'',
            startTime:"",
            endTime:"",
            billList: [],
            haveMore: true,
            pageSize: 20,
            curPage: 0,
		}
    },
    watch:{
    //    startTime(val){
    //        let date = new Date().getTime() - 1000*60*60*24;
    //        if(new Date(val).getTime() > new Date(this.endTime).getTime()){
    //             $toast.show("起始时间不能大于截止时间或今天", 3000);
    //             return;
    //         }
    //         if(new Date(this.endTime).getTime() > date){
    //             $toast.show("只能查询今天之前的数据", 3000);
    //             return;
    //         }
    //         this.getData(val,this.endTime);
    //    },
    //    endTime(val){
    //        let date = new Date().getTime() - 1000*60*60*24;
    //        if(new Date(this.startTime).getTime() > new Date(val).getTime()){
    //             $toast.show("起始时间不能大于截止时间", 3000);
    //             return;
    //         }
    //         if(new Date(val).getTime() > date){
    //             $toast.show("只能查询今天之前的数据", 3000);
    //             return;
    //         }
    //         this.getData(this.startTime,val);
    //    }
    },
    methods: {
        // showDate(){
        //     console.log("ks")
        //     console.log(this.$refs.pickerForStart.open)
        //     this.visible = true;
        //     this.$refs.pickerForStart.open();
        // },
        setStartTime(val){
            console.log(val)
            this.startTime = val;
            // this.startTime=new Date(this.sTime).Format('yyyy-MM-dd');
            let date = new Date().getTime() - 1000*60*60*24;
            if(new Date(this.startTime).getTime() > new Date(this.endTime).getTime()){
                $toast.show("起始时间不能大于截止时间", 3000);
                return;
            }
            if(new Date(this.endTime).getTime() > date){
                $toast.show("只能查询今天之前的数据", 3000);
                return;
            }
            this.getData(this.startTime,this.endTime);
        },
        setEndTime(val){
            this.endTime = val;
            // this.startTime=new Date(this.sTime).Format('yyyy-MM-dd');
            let date = new Date().getTime() - 1000*60*60*24;
            if(new Date(this.startTime).getTime() > new Date(this.endTime).getTime()){
                $toast.show("起始时间不能大于截止时间", 3000);
                return;
            }
            if(new Date(this.endTime).getTime() > date){
                $toast.show("只能查询今天之前的数据", 3000);
                return;
            }
            this.getData(this.startTime,this.endTime);
        },
        getDataByNowTimeRange(){
            this.endTime=new Date(this.eTime).Format('yyyy-MM-dd');
            let date = new Date().getTime() - 1000*60*60*24;
            if(new Date(this.startTime).getTime() > new Date(this.endTime).getTime()){
                $toast.show("起始时间不能大于截止时间", 3000);
                return;
            }
            if(new Date(this.endTime).getTime() > date){
                $toast.show("只能查询今天之前的数据", 3000);
                return;
            }
            this.getData(this.startTime,this.endTime);
        },
        onInfinite(done) {
            this.curPage++;
            this.haveMore = true;
            this.$http({
                url:"third-party",
                method:"GET",
                params:{
                    storeId:this.storeId,
                    page:this.curPage,
                    size:this.pageSize,
                    from:this.startTime,
                    to:this.endTime
                }
            }).then((res)=>{
                if ( !res.data.electronicBills[0] ) {
                    this.haveMore = false;
                    this.curPage--;
                    done();
                    return;
                }
                this.billList = this.billList.concat(res.data.electronicBills);
                done();
            }).catch(()=>{

            })
        },

        numberToMonthDate: function (val) {
            let date = new Date(val);
            let dateStr = ((date.getMonth()+1)<10?('0'+(date.getMonth()+1)):(date.getMonth()+1))+'.'+(date.getDate()<10?'0'+date.getDate():date.getDate())+' '+ (date.getHours()<10?'0'+date.getHours():date.getHours()) + ':' + (date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes());
            return dateStr;
        },

        onItemClick(index) {
            console.log(index)
        },
        getData(from,to){
            this.$http({
                url:"third-party",
                method:"GET",
                params:{
                    storeId:this.storeId,
                    page:this.curPage,
                    size:this.pageSize,
                    from,
                    to
                }
            }).then(res=>{
                this.billList = res.data.electronicBills;

                this.refundAmount = res.data.refundAmount;
                this.serviceChargeAmount = res.data.serviceChargeAmount;
                this.totalAmount = res.data.totalAmount;
                this.totalSingular = res.data.totalSingular;

                if ( res.data.electronicBills.length < this.pageSize ) {
                    this.haveMore = false;
                }
            }).catch(()=>{

            })
            }
    },
    created(){
        
        // this.$http.get('/third-party?storeId='+this.storeId+'&page='+this.curPage+'&size='+this.pageSize).then((res)=>{
        //     this.billList = res.data.electronicBills;
        //     if ( res.data.electronicBills.length < this.pageSize ) {
        //         this.haveMore = false;
        //     }
        // }).catch(()=>{

        // })
    },
    mounted(){
        document.title = "电子对账单";
        let date = new Date().getTime() - 1000*60*60*24;
        date = new Date(date).Format('yyyy-MM-dd');
        console.log(date)
        this.startTime = date;
        this.endTime = date;
        this.sTime = date;
        this.eTime = date;
        this.getData(this.startTime,this.endTime);
    }
}
</script>
<style lang="scss" scoped>
	@import "electronBill";
</style>
